<%@ page import="java.net.URLDecoder" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>

<link rel="stylesheet" href="${path}/css/login-register/font-awesome.min.css">
<link rel="stylesheet" href="${path}/css/login-register/style.css">

<!--默认样式-->
<link rel="stylesheet" href="${path}/css/login-register/reset.css">

<!--响应式框架-->
<link rel="stylesheet" type="text/css" href="${path}/css/login-register/bootstrap.css">

<!--css3动画库-->
<link rel="stylesheet" href="${path}/css/login-register/animate.css">

<!--banner大图基础样式-->
<link rel="stylesheet" href="${path}/css/login-register/slick.css">

<!--页面滚动基础样式-->
<link rel="stylesheet" href="${path}/css/login-register/jquery.fullPage.css" />

<!--导航样式-->
<link rel="stylesheet" href="${path}/css/login-register/head.css" />

<!--图片和滚屏样式-->
<link rel="stylesheet" href="${path}/css/login-register/index.css">
<style>
body {
            /* background-image: url(../imgs/login-register/21.jpg); */
            /* background-image: url(../imgs/login-register/20.jpg);
            background-image: url(../imgs/login-register/19.jpg); */
            background-repeat: no-repeat;
            background-size: 100%, 100%;
            background-attachment: fixed;
        }
</style>
</head>
<body>
<%
	//获取cookie
	//每次请求的时候,会将所有的cookie全部发送给server
	Cookie[] cookies = request.getCookies();

	String uname="";
	String pwd="";
	//定义一个标记位
	boolean flag = false;

	if(null!=cookies && cookies.length>0){
		for(Cookie c:cookies){
			//找到name=username的cookie
			if("userLogin".equals(c.getName())){
				String value = c.getValue();

				if(value.trim().length()==0){
					break;
				}
				// System.out.println(value.split(":")[0]);

				//如果对用户名进行二级编码,那么此处需要进行二级解码
				uname = value.split(":")[0];

				uname = URLDecoder.decode(URLDecoder.decode(uname,"utf-8"),"utf-8");

				pwd = value.split(":")[1];

				flag = true;
				break;
			}
		}
	}
	pageContext.setAttribute("uname",uname);
	pageContext.setAttribute("pwd",pwd);
	pageContext.setAttribute("flag",flag);
%>
	<!-- 背景轮播 -->
<div id="index_main" class="index_main">
	<!--导航-->
	<div class="section section1">
		<div class="index_banner">
			<div class="item">
				<div class="items scaleBg" style="background-image: url(http://pz9i3bxwr.bkt.clouddn.com//login1.jpg);"></div>
			</div>
			<div class="item">
				<div class="items scaleBg" style="background-image: url(http://pz9i3bxwr.bkt.clouddn.com//login20.jpg);"></div>
				
			</div>
			<div class="item">
				<div class="items scaleBg" style="background-image: url(http://pz9i3bxwr.bkt.clouddn.com//login23.jpg);"></div>
				
			</div>
			<div class="item">
				<div class="items scaleBg" style="background-image: url(http://pz9i3bxwr.bkt.clouddn.com//login24.jpg);"></div>
				
			</div>
			<div class="item">
				<div class="items scaleBg" style="background-image: url(http://pz9i3bxwr.bkt.clouddn.com//login25.jpg);"></div>
				
			</div>            
		</div>
		<div class="left slick_txt">
			<div class="prev slick_arrow"></div>
		</div>
		<div class="right slick_txt">
			<div class="next slick_arrow"></div>
		</div>
		<div class="number">
			<div class="inner clearfix">
				<span class="active">01</span>
				<span >02</span>
				<span >03</span>
				<span >04</span>
				<span >05</span>
			</div>
		</div>
	</div>
</div>

<!-- 登录注册 -->
<div class="materialContainer" style="opacity: 0.6;height: 720px">
	<%--登录--%>
		<form class="box" action="${path}/user/login" style="height: 720px">
		<div class="title" style="font-weight:bolder;color: red">登录</div>
		<div class="input">
			<input type="text" name="uId" id="name" value='${uname}'placeholder="请输入账号">
			<span class="spin"></span>
			<c:if test="${param.error==0}">
			<div class='col-md-6' style='padding-top:20px'>
				<span class='text-danger'>用户不存在!</span>
			</div>
		</c:if>
		</div>



		<div class="input">
			<input type="password" name="pwd" id="pass"  value='${pwd}' placeholder="请输入密码">
			<span class="spin"></span>

			<c:if test="${param.error==1}">
			<div class='col-md-3' style='padding-top:20px'>
				<span class='text-danger'>密码错误!</span>
			</div>
		</c:if>
		</div>

		<div class="button login">
			<button type="submit" >
				<span >登录</span>
				<!-- <i class="fa fa-check"></i> -->
            </button><br>

		</div>
		<span id="rememberOrfindPwd" style="padding-left: 80px">
				     <label>
                         <c:if test="${flag}">
                         <input type='checkbox' name='flag' checked>请记住我
                         </c:if>
                         <c:if test="${!flag}">
							 <input type='checkbox' name='flag'>请记住我
						 </c:if>
					 </label>
				</span>
        <%--<a href="javascript:" class="pass-forgot" style="text-decoration: none">忘记密码？</a>--%>
	</form>

	<%--注册--%>
	<from class="overbox" style="height: 720px">
		<div class="material-button alt-2" style="border-radius: 0px;margin-top: -50px;margin-right: -30px">
			<span class="shape" style="color: red"></span>
		</div>
		<div class="title" style="color: red">注册</div>
		<div class="input">
			<input type="text" name="uId" id="regname" placeholder="请输入账号">
			<span class="spin"></span>
			<span id="error1" style="color: #0C0C0C;font-weight: bolder"></span>
		</div>
		<div class="input">
			<input type="password" name="pwd1" id="regpass" placeholder="请输入密码">
			<span class="spin"></span>
			<span id="error3" style="color: #0C0C0C;font-weight: bolder"></span>
		</div>
		<div class="input">
			<input type="password" name="pwd2" id="reregpass" placeholder="确认密码">
			<span class="spin"></span>
			<span id="error2" style="color: #0C0C0C;font-weight: bolder"></span>
		</div>
		<div class="input" >
			<input type="text" name="phoneNumber" id="regphone" placeholder="请输入手机号">
			<span class="spin"></span>
		</div>
		<div class="input" style="width: 265px;float: left">
			<input type="password" name="reregpass" id="regcode" placeholder="请输入验证码" style="width: 270px">
			<span class="spin"></span>
			<span id="error4" style="color: #0C0C0C;font-weight: bolder"></span>
		</div>
		<div class="input" style="width: 90px;height: 20px;float: left">
		<button   type="button" id="getCode" style="width: 90px;height: 50px;margin-top: 10px;color: red;font-weight: bolder">
			发送验证码</button>
		</div>
		<div class="button" style="margin-top: 10px">
			<button type="button" id="regist_btn">
				<span>注册</span>
			</button>
		</div>
	</from>

</div>

<script src="${path}/js/login-register/jquery.min.js"></script>
<script src="${path}/js/login-register/index.js"></script>
<script src="${path}/js/background/jquery.min.js"></script>
<script src="${path}/js/background/jquery.fullPage.min.js"></script>
<script src="${path}/js/background/index_slick.js"></script>
<script src="${path}/js/background/index.js"></script>

<script>
    $("#regist_btn").click(function () {
        //			账号
        var regname = document.getElementById("regname");
        if(regname.value==''){
            alert('账号不能为空');
            regname.focus();
            return false;
        }else{
            var vname=(/^\d{4,}$/);
            if (!vname.test(regname.value)) {
                alert('账号至少4个数字');
                regname.focus();
                return false;
            }
        }
        //			密码
        var pwd1 = document.getElementById('regpass');
        if(pwd1.value==''){
            alert('密码不能为空');
            pwd1.focus();
            return false;
        }else{
            var vpwd = (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+$/);
            if(!vpwd.test(pwd1.value)){
                alert('密码错误，密码由数字和字母组成');
                pwd1.focus();
                return false;
            }else{
                if(pwd1.value.length<6){
                    alert('密码不能少于6位');
                    pwd1.focus();
                    return false;
                }
            }
        }
        //			验证密码
        var pwd2 = document.getElementById('reregpass');
        if(!(pwd2.value==pwd1.value)){
            alert('确认密码与第一次输入不同，请重新输入');
            pwd2.focus();
            return false;
        }
        //			电话
        var phoneNumber = document.getElementById('regphone');
        if(phoneNumber.value==''){
            alert('电话不能为空');
            phoneNumber.focus();
            return false;
        }else{
            var phone_reg = (/^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}|17[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}/);
            var tel_reg = (/^([0-9]{3,4}-)?[0-9]{7,8}$/);
            if(!phone_reg.test(phoneNumber.value) && !tel_reg.test(phoneNumber.value)){
                alert('手机或电话号码格式不正确。如果是固定电话，必须形如(xxxx-xxxxxxxx)');
                phoneNumber.focus();
                return false;
            }
        }

        document.getElementById("error1").innerText="";
        document.getElementById("error2").innerText="";
        document.getElementById("error3").innerText="";
        document.getElementById("error4").innerText="";
        $.post("${path}/user/register",
            {
                uId:document.getElementById("regname").value,
                pwd1:document.getElementById("regpass").value,
                pwd2:document.getElementById("reregpass").value,
				phoneNumber:document.getElementById("regphone").value,
				preauthcode:document.getElementById("regcode").value
            },
            function (data) {
                if(data=="用户名已存在"){
                    document.getElementById("error1").innerText="用户名已存在";
                }
                if(data=="两次密码不一致"){
                    document.getElementById("error2").innerText="两次密码不一致";
                }
                if(data=="请您输入密码"){
                    document.getElementById("error3").innerText="请您输入密码";
                }
                if(data=="验证码错误"){
                    document.getElementById("error4").innerText="验证码错误";
				}
                if(data=="ok"){
                    alert("注册成功");
                }
            }
        )
    });
</script>
<%--验证码判断--%>
<script>
    $("#getCode").click(function () {
        //			电话
        var phoneNumber = document.getElementById('regphone');
        if(phoneNumber.value==''){
            alert('电话不能为空');
            phoneNumber.focus();
            return false;
        }else{
            var phone_reg = (/^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}|17[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}/);
            var tel_reg = (/^([0-9]{3,4}-)?[0-9]{7,8}$/);
            if(!phone_reg.test(phoneNumber.value) && !tel_reg.test(phoneNumber.value)){
                alert('手机或电话号码格式不正确。如果是固定电话，必须形如(xxxx-xxxxxxxx)');
                phoneNumber.focus();
                return false;
            }
        }

        $.post("${path}/user/getcode",
            {
                phoneNumber:document.getElementById("regphone").value
            },
            function (data) {
                if(data=="已获取手机号并发送"){
                    document.getElementById("getCode").innerText="已发送";
                }
                if(data=="发送失败"){
                    document.getElementById("getCode").innerText="发送失败";
                }
            }
        )
    });
</script>
</body>
</html>